import React from "react";
import {Badge, Card, Carousel, Col, Divider, Form, Icon, message, Modal, Row, Spin} from "antd";
import {connect} from "dva";
import router from 'umi/router';
import APP from "@/components/Tool/BaseAPP";
import {Select} from "antd/lib/select";
import {array} from "prop-types";

@connect(({commonModel,appUpModel,noticeModel}) => ({
    commonModel,appUpModel,noticeModel
}))
class index extends React.Component {

    state = {
        //-- 页面数据
        dataSource: {},
        //-- 加载层
        loading: false,
        showDownloadModal: false,
        downloadList: [],
        noticeList: [],
        showNoticeData: {},
        isShowNoticeModal: false
    };

    componentDidMount() {
        // const userType = localStorage.getItem("MYRCIB_USER_TYPE");
        // if (!userType) {
        //     router.push('/user/login');
        //     return <div></div>;
        // } else if (userType == "3") {
        //     router.push('/index/admin');
        //     return <div></div>;
        // }
        this.findPageData();
        this.getNoticeByCarousel();
    }

    findPageData = () => {
        const thisCtx = this;
        const {dispatch} = this.props;
        this.setState({loading: true});
        dispatch({
            type: 'commonModel/initData',
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    console.log(data);
                    thisCtx.setState({
                        dataSource: data.datas
                    });
                } else {
                    message.error('首页数据加载失败');
                }
            }
        });
    };

    handlerRoter = (type) => {
        router.push(`/${type}`);
    };

    render() {
        const that = this;
        const {loading, dataSource, noticeList} = that.state;

        const colLayout = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 8,
            style: {
                marginBottom: 24,
                padding: 10,
            },
        };
        const spareColLayout = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 2,
        };

        const cardLayout = {
            bodyStyle: {padding: '20px 24px 8px 24px'},
        };

        const cardStyle = {
            fontSize: 20,
            color: 'white',
            height: 150,
            textAlign: 'center',
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
        };
        const cardColor = {
            1: '#FF9966',
            2: '#1899FF',
            3: '#FF99CC',
            4: '#21BA63',
            5: '#CC99FF',
            6: '#CC9966',
        };

        const spanLayout = {
            display: "block",
            marginTop: '0.25rem',
            fontSize: '0.6rem',
            color: '#969696'
        };

        const carouselListStyle = {
            fontSize: 22,
            color: 'red'
        };

        function noticeCarousel(noticeList) {
            let noticeCarousel = '';
            if (noticeList.length > 0) {
                let carouselList = [];
                for (let i = 0; i < 2; i++) {
                    noticeList.map(item => (carouselList.push(
                        <div onClick={() =>{that.getNoticeDataById(item.id)}}>
                            <span className={'notice_' + item.id} style={carouselListStyle}>{item.title}</span>
                        </div>)));
                }
                noticeCarousel = <Row style={{cursor:'pointer'}}><Carousel autoplay dots={false}>{carouselList}</Carousel></Row>;
            }
            return noticeCarousel;
        }

        return (
            <Spin spinning={loading}>
                <div style={{width: 'auto', height: '100%'}}>
                    {noticeCarousel(noticeList)}
                    <Row>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[1], ...cardStyle}}
                                  onClick={() => this.handlerRoter('customer')}
                            >
                                <div>客户&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.customerCount || 0}位</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[2], ...cardStyle}}
                                  onClick={() => this.handlerRoter('hourse')}
                            >
                                <div>楼盘&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.hourseCount || 0}个</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[3], ...cardStyle}}
                                  onClick={() => this.handlerRoter('elevator')}
                            >
                                <div>电梯&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.elevatorCount || 0}部</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[4], ...cardStyle}}
                                  onClick={() => this.handlerRoter('point/point')}
                            >
                                <div>点位&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.pointCount || 0}个</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[5], ...cardStyle}}
                                  onClick={() => this.handlerRoter('journal/journal')}
                            >
                                <div>期刊&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.journalCount || 0}个</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[6], ...cardStyle}}
                                  onClick={() => this.handlerRoter('operator')}
                            >
                                <div>运营商&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.operatorCount || 0}位</div>
                            </Card>
                        </Col>
                    </Row>
                    <Divider orientation="left">常用功能</Divider>
                    <Row style={{paddingTop: 20}}>
                        <Col {...spareColLayout}
                             onClick={() => {window.location.href = 'http://www.yfkj-vip.com/file/yfkjsms-jb.pdf'}}
                        >
                            <div style={{textAlign: 'center'}}>
                                <Badge status="success">
                                    <Icon style={{fontSize: 50, color: '#21BA63'}} type="safety-certificate"/>
                                </Badge>
                                <span style={{...spanLayout}}>操作手册</span>
                            </div>
                        </Col>
                        <Col {...spareColLayout}
                             onClick={() => {/*this.handlerRoter('inquiry')*/}}
                        >
                            <div style={{textAlign: 'center'}}>
                                <Badge status="success">
                                    <Icon style={{fontSize: 50, color: '#21BA63'}} type="phone"/>
                                </Badge>
                                <span style={{...spanLayout}}>客服电话</span>
                            </div>
                        </Col>
                        <Col {...spareColLayout}
                             onClick={() => {this.showDownload()}}
                        >
                            <div style={{textAlign: 'center'}}>
                                <Badge status="success">
                                    <Icon style={{fontSize: 50, color: '#21BA63'}} type="android" />
                                </Badge>
                                <span style={{...spanLayout}}>APP下载</span>
                            </div>
                        </Col>
                    </Row>
                </div>
                <DownloadModal parent={this} />
                <ShowNoticeModal parent={this} />
            </Spin>
        );
    }

    getNoticeDataById(noticeId) {
        const that = this;
        const {dispatch} = that.props;
        APP.loading(that);
        dispatch({
            type: "noticeModel/getNoticeById",
            payload: {id: noticeId},
            callback: function (data) {
                that.findResponseByUrl(data.datas.content, function(result) {
                    data.datas.content = result;
                    that.setState({
                        loading: false,
                        showNoticeData: data.datas,
                        isShowNoticeModal: true
                    });
                });
            }
        });
    }

    showDownload() {
        const that = this,
            { dispatch } = that.props;
        APP.loading(that);
        dispatch({
            type: "appUpModel/getNewDownload",
            callback: function (data) {
                APP.closeLoading(that);
                if (data.success) {
                    that.setState({
                        showDownloadModal:true,
                        downloadList:data.list
                    });
                } else {
                    message.error(data.msg);
                }
            }
        });
    }

    getNoticeByCarousel() {
        const that = this;
        const {dispatch} = that.props;
        APP.loading(that);
        dispatch({
            type: "noticeModel/list",
            payload: {
                notLimit: true,
                isenabled: 1,
                scroll: 1
            },
            callback: function (data) {
                APP.closeLoading(that);
                if (data.success) {
                    that.setState({
                        noticeList: data.datas.list
                    });
                } else {
                    message.error(data.msg);
                }
            }
        });
    }

    findResponseByUrl(fileUrl, callback) {
        const that = this;
        const {dispatch} = that.props;
        if (!APP.isValidObj(fileUrl)) {
            APP.closeLoading(that);
            return;
        }
        if (!fileUrl.startsWith('https://')) {
            callback(fileUrl);
            return;
        }
        const formData = new window.FormData();
        formData.append('fileUrl', fileUrl);
        dispatch({
            type: 'commonModel/getResponseByFileUrl',
            payload: formData,
            callback: function(data) {
                if (data.success) {
                    if (APP.isValidObj(callback)) {
                        callback(data.result);
                    }
                } else {
                    APP.errorMessage(data.msg);
                }
            },
        });
    }
}
const DownloadModal = Form.create()(props => {
    let {parent} = props;
    const {showDownloadModal, downloadList} = parent.state;

    const downloadRow = downloadList.map(item => (
        <div style={{margin: 25, fontSize: 25}}>
            <Row style={{textAlign: 'center'}}>
                <img src={'http://qr.topscan.com/api.php?text=' + item.appPath} />
            </Row>
            <Row style={{textAlign: 'center'}}>
                <u><a download href={item.appPath}>{item.aname}</a></u>
            </Row>
        </div>
    ));

    return (
        <Modal
            visible={showDownloadModal}
            footer={null}
            onCancel={() => parent.setState({showDownloadModal:false})}
            width={750}
            style={{display: 'flex'}}
        >
            <div style={{display: 'flex', flexWrap: 'wrap'}}>{downloadRow}</div>
        </Modal>
    );
});

const ShowNoticeModal = Form.create()(props => {
    let {parent} = props;
    const {isShowNoticeModal, showNoticeData, loading} = parent.state;

    function handlerEditModal() {
        let {isShowNoticeModal, showNoticeData} = parent.state;
        isShowNoticeModal = !isShowNoticeModal;
        showNoticeData = {};
        parent.setState({isShowNoticeModal, showNoticeData});
    }

    return (
        <Modal
            visible={isShowNoticeModal}
            title={showNoticeData.title}
            confirmLoading={loading}
            onCancel={() => handlerEditModal()}
            footer={false}
            closable={false}
            width={1000}
        >
            <div dangerouslySetInnerHTML={{__html:showNoticeData.content}} />
        </Modal>
    );
});

export default index;
